<template>
	<view class="wui-messageInput">
		<view
			class="input-item"
			:class="[value.length === index && focus_ ? 'input-item-active' : 'input-item-default']"
			:style="[value.length === index && focus_ ? activeBorderColorComputed : defaultBorderColorComputed,itemSizeComputed]"
			v-for="(i, index) in maxlength"
			:key="index"
			@click="setFocus(index)"
		>
			{{ valueComputed[index] || '' }}
		</view>
		<!-- #ifdef H5 -->
		<input v-if="type==='number'" class="input-hidd" type="number" :maxlength="maxlength" :value="value" @input="emitInput"  :focus="focus_" auto-blur @blur="setBlur" />
		<input v-if="type==='text'" class="input-hidd" type="text" :maxlength="maxlength"  :value="value" @input="emitInput" :focus="focus_" auto-blur @blur="setBlur" />
		<input v-if="type==='idcard'" class="input-hidd" type="idcard" :maxlength="maxlength"  :value="value" @input="emitInput" :focus="focus_" auto-blur @blur="setBlur" />
		<input v-if="type==='digit'" class="input-hidd" type="digit" :maxlength="maxlength"  :value="value" @input="emitInput" :focus="focus_" auto-blur @blur="setBlur" />
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<input class="input-hidd" :type="type" :maxlength="maxlength"  :value="value" @input="emitInput" :focus="focus_" auto-blur @blur="setBlur" />
		<!-- #endif -->
		
	</view>
</template>
<script>
export default {
	name: 'w-messageInput',
	props: {
		value: {
			type: String
		},
		type:{
			type: String,
			default:'number'
		},
		focus: {
			type: Boolean,
			default: false
		},
		maxlength: {
			type: Number,
			default: 4
		},
		activeBorderColor: {
			type: String,
			default: '#ff5959'
		},
		defaultBorderColor:{
			type: String,
			default: '#7e7e7e'
		},
		activeFontColor: {
			type: String,
			default: '#ff5959'
		},
		defaultFontColor:{
			type: String,
			default: '#7e7e7e'
		},
		itemSize:{
			type:Number,
			default:80
		}
	},
	watch: {
		value(val) {
			this.$emit('input', val);
			if (val.length === this.maxlength) {
				this.setBlur();
			}
		},
	},
	computed: {
		valueComputed() {
			return this.value.split('');
		},
		activeBorderColorComputed() {
			return {
				'--border-color': this.activeBorderColor
			};
		},
		defaultBorderColorComputed() {
			return {
				'--border-color': this.defaultBorderColor
			};
		},
		activeFontColorComputed() {
			return {
				'--font-color': this.activeFontColor
			};
		},
		defaultFontColorComputed() {
			return {
				'--font-color': this.defaultFontColor
			};
		},
		itemSizeComputed(){
			return{
				'--size': uni.upx2px(this.itemSize) + 'px',
				'--font-size': uni.upx2px(this.itemSize)*0.5 + 'px'
			}
		}
	},
	data() {
		return {
			focus_: this.focus
		};
	},
	methods: {
		emitInput(e){
			this.$emit('input',e.detail.value)
		},
		setFocus(index) {
			this.focus_ = !this.focus_;
		},
		setBlur() {
			this.$nextTick(() => {
				this.focus_ = false;
			});
		}
	}
};
</script>

<style lang="scss" scoped>

/* 呼吸效果 */
@keyframes messageInput {
	0% {
		opacity:1;
		border-color: var(--border-color);
		box-shadow:0 0 6rpx var(--border-color);
	}
	100% {
		opacity:.2;
		border-color: var(--border-color);
	}
}


.wui-messageInput {
	position: relative;
	overflow: hidden;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	.input-item {
		width: var(--size);
		margin: 0 10rpx;
		height: var(--size);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: var(--font-size);
		border-width: 4rpx;
		border-style: solid;
	}
	.input-item-default{
		border-color: var(--border-color);
	}

	.input-item-active {
		animation-timing-function: ease-in-out;
		animation-name: messageInput;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	.input-hidd {
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		width: 1rpx;
		height: 1rpx;
	}
}
</style>
